<template>
  <div class="box">
    <div id="holder" />
    <div class="login-form">
      <h1 style="text-align: center;color: #111;font-size: 25px;margin-bottom: 20px;">凯卓知产欢迎您！</h1>
      <el-input v-model="loginObj.username" class="form-line" placeholder="请输入账号" />
      <el-input v-model="loginObj.password" class="form-line" placeholder="请输入密码" show-password />
      <el-button type="primary" class="btn-submit" @click="submitForm">登录</el-button>
    </div>
    <div
      style="color: #fff;width: 100%; line-height: 25px;padding:20px; text-align: center;font-size: 12px; position: absolute; bottom: 0;"
    >
      公司地址：xxxxx
      联系电话：xxxx-xxxxxxxx
      <br>
      版权所有 © 2019 凯卓知产 京ICP备xxxxxx号
    </div>
  </div>
</template>
<script>
import wave from '@/assets/modular/bakJs/js/index'

export default {
  name: 'Login',
  data() {
    return {
      loginObj: {
        username: '',
        password: ''
      }
    }
  },
  mounted() {
    var wavesObj = new wave('#holder', {
      fps: false,
      waves: 3,
      width: 100
    })
    wavesObj.animate()
  },
  methods: {
    submitForm() {
      const user = { ...this.loginObj }
      user.username = `mblu2_${user.username}`
      this.$store.dispatch('LoginByUsername', user).then(() => {
        this.$router.push('/theme0/index')
      })
    }
  }
}
</script>
<style scoped src="../../assets/modular/bakJs/css/style.css"></style>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  /*background: url(../../../assets/imgs/indexBak.jpg);*/
}

.login-form {
  position: absolute;
  top: 200px;
  right: 100px;
  width: 25%;
  background: #fff;
  padding: 60px;
}

.btn-submit {
  width: 100%;
  height: 40px;
}

.form-line {
  margin-bottom: 10px;
}
</style>
